import React, { useEffect, useState } from 'react'
//nanoid是生成随机id的第三方模块
import { nanoid } from 'nanoid'
import './App.css'
import Header from './components/Header'
import List from './components/List'
import Footer from './components/Footer'
export default function App() {
    const [todoList, setTodoList] = useState([])
    useEffect(() => {
        setTodoList(JSON.parse(localStorage.getItem('todoList')) || [])
    }, [])
    useEffect(() => {
        localStorage.setItem('todoList',JSON.stringify(todoList)) 
    }, [todoList])
    return (
        <div className="todo-container">
            <div className="todo-wrap">
                <Header todoList={todoList} setTodoList={setTodoList} />
                <List todoList={todoList} setTodoList={setTodoList} />
                <Footer todoList={todoList} setTodoList={setTodoList} />
            </div>
        </div>
    )
}
